<template>
  <div>
    <Panle title='团购配置' ></Panle>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="拼团分享" name="1">
        <el-form :model="form1"  ref="form1"  class="tabform" label-position="center" label-width="120px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="团购分享标题：" prop="title">
                <el-input v-model="form1.title" size="mini" ></el-input>
                <el-input  v-model="form1.label0" type="hidden" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="团购分享图片：" prop="img">
                <div class="uploadcol" style="display:inline-block;margin-left: 10px">
                  <div class="uploadborder">
                    <img v-if="form1.img" :src="form1.img" width="100%" height="100%" />
                    <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />
                  </div>
                  <el-button type="primary" @click="openUploadDial" size="mini" style="margin-top:10px">上传图片</el-button>
                  <el-input  v-model="form1.label1" type="hidden" ></el-input>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="是否启用:">
                <el-radio-group v-model="form1.status">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="2">不启用</el-radio>
                </el-radio-group>
                <el-input  v-model="form1.label2" type="hidden" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="" >
                <el-button type="primary" size="mini" @click="submitGroupSet">提交数据</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :source="2" :selectType="imgnum" @selectSure="selectImgs" :type="0"></select-img>
      </el-tab-pane>
      <el-tab-pane label="拼团标签" name="2">
        <el-form :model="form2"  ref="form2"  class="tabform" label-position="center" label-width="120px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="准备中：" prop="tags0">
                <el-input v-model="form2.tags0" size="mini" ></el-input>
                <el-input type="hidden" v-model="form2.status_name0"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="拼团中：" prop="tags1">
                <el-input v-model="form2.tags1" size="mini" ></el-input>
              </el-form-item>
              <el-input type="hidden" v-model="form2.status_name1" size="mini" ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="已成团：" prop="tags2">
                <el-input v-model="form2.tags2" size="mini" ></el-input>
              </el-form-item>
              <el-input type="hidden" v-model="form2.status_name2" size="mini" ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="拼团失败：" prop="tags3">
                <el-input v-model="form2.tags3" size="mini" ></el-input>
              </el-form-item>
              <el-input type="hidden" v-model="form2.status_name3" size="mini" ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="自动成团：" prop="tags4">
                <el-input v-model="form2.tags4" size="mini" ></el-input>
              </el-form-item>
              <el-input type="hidden" v-model="form2.status_name4" size="mini" ></el-input>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="" >
                <el-button type="primary" size="mini" @click="submitQwTagsSet">提交数据</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :source="2" :selectType="imgnum" @selectSure="selectImgs" :type="0"></select-img>
      </el-tab-pane>
      <el-tab-pane label="领课标题" name="3">
        <el-form :model="form3"  ref="form3"  class="tabform" label-position="center" label-width="120px" >
          <el-row  v-for="(item,index) in titleData">
            <el-col :span="12">
              <el-form-item :label=" item.label" prop="tags0">
                <textarea v-model="item.value" cols="80" rows="5"></textarea>
              </el-form-item>
              <el-input type="hidden" v-model="form3.status1" size="mini" ></el-input>
            </el-col>
          </el-row>
          <!--<el-row>-->
            <!--<el-col :span="12">-->
              <!--<el-form-item label="团购：" prop="tags1">-->
                <!--<textarea v-model="form3.status2" cols="80" rows="5"></textarea>-->
              <!--</el-form-item>-->
              <!--<el-input type="hidden" v-model="form3.status2" size="mini" ></el-input>-->
            <!--</el-col>-->
          <!--</el-row>-->
          <!--<el-row>-->
            <el-col :span="12">
              <el-form-item label="" >
                <el-button type="primary" size="mini" @click="submitLingkeSet">提交数据</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :source="2" :selectType="imgnum" @selectSure="selectImgs" :type="0"></select-img>
      </el-tab-pane>
      <el-tab-pane label="团购提示语" name="4">
        <el-form :model="form4"  ref="form4"  class="tabform" label-position="center" label-width="120px" >
          <el-row>
            <el-col :span="12">
              <el-form-item label="限购拦截提示语：" prop="tags1" >
                <el-input v-model="form4.limited_prompt_msg" size="mini" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="老客拦截提示语：" prop="tags2">
                <el-input v-model="form4.old_prompt_msg" size="mini" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="新客拦截提示语：" prop="tags3">
                <el-input v-model="form4.new_prompt_msg" size="mini" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-input  v-model="form4.relist1" type="hidden" ></el-input>
          <el-input  v-model="form4.relist2" type="hidden" ></el-input>
          <el-input  v-model="form4.relist3" type="hidden" ></el-input>
          <el-row>
            <el-col :span="12">
              <el-form-item label="" >
                <el-button type="primary" size="mini" @click="submitPrompt">提交数据</el-button>
              </el-form-item>
            </el-col>
          </el-row>

        </el-form>
        <select-img :show="IsShowPicDig" @update="cleanDiaglog" :source="2" :selectType="imgnum" @selectSure="selectImgs" :type="0"></select-img>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  groupSettle,
  groupSettleInfo,
  settleQiweiTags,
  getQiweiTags,
  addLingkeTitle,
  getLingkeTitle,
  getSettlePrompt, getPromptList
} from "@/api/sell/settle/settle";

var _self;
import Panle from '@/components/Panle.vue'
import SelectImg from "@/components/select-img.vue";
export default{
  name:"Setup1",
  components:{
    SelectImg,
    Panle
  },
  data(){
    return{
      activeName:'1',
      form1:{
        title:'',
        img:'',
        status:1,
        label0:'团购分享标题',
        label1:'团购分享图片',
        label2:'是否启用'
      },
      form2:{
        tags0:'',
        tags1:'',
        tags2:'',
        tags3:'',
        tags4:'',
        status_name0:'准备中',
        status_name1:'拼团中',
        status_name2:'已成团',
        status_name3:'拼团失败',
        status_name4:'自动成团',
      },
      form3:{
        status1:'长按二维码领取课程',
        status2:'长按二维码领取课程',

      },
      form4:{
        relist1:'limited_prompt_msg',
        relist2:'old_prompt_msg',
        relist3:'new_prompt_msg',
      },
      radio: '1',
      IsShowPicDig: false,
      imgnum: 1,
      titleData: [],
    }
  },
  created() {
    _self = this;
    _self.init();
  },
  methods:{
    init:function(){
      groupSettleInfo().then((res)=>{
        if(res.data){
          _self.form1.title = res.data.title;
          _self.form1.img = res.data.img;
          _self.form1.status = res.data.status;
        }
      })
      getQiweiTags().then((res)=>{
        if(res.data){
          _self.form2.tags0 = res.data.tags0
          _self.form2.tags1 = res.data.tags1
          _self.form2.tags2 = res.data.tags2
          _self.form2.tags3 = res.data.tags3
          _self.form2.tags4 = res.data.tags4
        }
      })
        getLingkeTitle().then((res)=>{
            console.log(res.data)
        // if(res.data){
        //   this.form3.status1 = res.data.status1
        //   this.form3.status2 = res.data.status2
        // }
        this.titleData = res.data
      })
      getPromptList().then((res)=>{
        if(res.data){
          //{...res.data}
          this.form4 = Object.assign({}, this.form4, res.data)
        }
      })
    },

    handleClick: function(tab, event){

    },

    openUploadDial: function () {
      _self.IsShowPicDig = true;
    },
    cleanDiaglog: function () {
      _self.IsShowPicDig = false;
    },
    selectImgs: function (res) {
      this.IsShowPicDig = true;
      this.form1.img = res[0].urls
    },
    submitGroupSet:function(){
      _self.$refs['form1'].validate((valid) =>{
        if (valid) {
          groupSettle(this.form1).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
            }else{
              this.msgError(res.msg);
            }
          })
        } else {
          return false;
        }
      });
    },
    submitQwTagsSet:function(){
      console.log(this.form2)
      _self.$refs['form2'].validate((valid) =>{
        if (valid) {
          settleQiweiTags(this.form2).then((res)=>{
            if(res.code==200){
              this.msgSuccess(res.msg);
            }else{
              this.msgError(res.msg);
            }
          })
        } else {
          return false;
        }
      });
    },
    submitLingkeSet:function(){
          addLingkeTitle(this.titleData).then((res) => {
              if(res.code==200){
                  this.msgSuccess(res.msg);
              }else{
                  this.msgError(res.msg);
              }
              this.init()
          })
    },
    submitPrompt:function(){
      getSettlePrompt(this.form4).then((res) => {
        if(res.code==200){
          this.msgSuccess(res.msg);
        }else{
          this.msgError(res.msg);
        }
        this.init()
      })
    },
  }

}
</script>

<style lang="scss">
@import "@/assets/css/common";
.el-tabs__item{
  font-size: 12px;
}
.show{
  display: block;
}
.hidden{
  display: none;
}
</style>
